<template>
  <!-- 担保物管理 -->
  <div class="guaranteeB">
    <!-- 顶部担保物审批 -->
    <div class="hander">
      <!-- <el-button size="large" type="primary" round>担保物审批</el-button> -->
    </div>

    <!-- 底部内容区域 -->
    <div class="footer">
      <!-- 底部内容区域上方输入框 -->
      <div class="top">
        <!--  -->
        <div class="menu">
          <el-select
            v-model="value"
            class="m-2"
            placeholder="状态"
            size="large"
            id="zhuangtai"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <!-- 输入框 -->
        <div class="topIndex">
          <el-input
            v-model="input4"
            class="w-50 m-2"
            placeholder="请输入要查询的担保物名称"
            size="large"
          >
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
        </div>
        <!-- 下拉菜单 -->

        <div class="menu">
          <el-select
            v-model="value"
            class="m-2"
            placeholder="类别"
            size="large"
            id="leibei"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="btns">
          <div class="left">
            <el-button type="primary" class="button">查询</el-button>
            <el-button type="primary" plain class="button">重制</el-button>
          </div>
        </div>
      </div>

      <!-- 底部内容区域中间内容 -->
      <div class="main">
        <el-table class="table" :data="bannerList" stripe style="width: 100%">
          <el-table-column prop="" label="序号">
            <template #default="scope">
              <span> {{ scope.$index + 1  }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="担保物编号">
            <template #default="row">
              <span> {{  row.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="担保物名称">
            <template  #default="row">
              <span>{{ row.dbwCollateralname }} </span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="担保物类别">
            <template #default="row">
              <span> {{ row.dbwCollateraltype }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="审批状态">
            <template #default="row">
              <span> {{ row.lading }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="更新时间">
            <template #default="{ row }">
              <span> {{ row.dbwUpdatetime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作">
            <el-icon color="rgba(78, 171, 254, 1)">
                <View />
              </el-icon>
          </el-table-column>
        </el-table>
      </div>

      <!-- 底部内容区域尾部页码 -->
      <div class="bottom">
        <el-pagination
          :page-sizes="[2, 4, 6, 8]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import service from "@/apis";

import { onMounted, ref } from "vue";

// 请求表格数据
var bannerList = ref([]);

onMounted(async () => {
  var res = await service.tables.add_dbwCollate();
  if (res.data.data) {
    res.data.data.forEach((item) => {
      item.lading = false;
    });
    bannerList.value = res.data.data;
  }
  console.log(res.data.data);
});


const value = ref("");

const options1 = [
  {
    value: "全部",
    label: "全部",
  },
  {
    value: "待审批",
    label: "待审批",
  },
  {
    value: "已审批",
    label: "已审批",
  },
];
const options = [
  {
    value: "全部",
    label: "全部",
  },
  {
    value: "保证金",
    label: "保证金",
  },
  {
    value: "车辆",
    label: "车辆",
  },
  {
    value: "法人担保",
    label: "法人担保",
  },
  {
    value: "设备",
    label: "设备",
  },
  {
    value: "房产",
    label: "房产",
  },
  {
    value: "存货",
    label: "存货",
  },
  {
    value: "土地",
    label: "土地",
  },
  {
    value: "自然人担保",
    label: "自然人担保",
  },
  {
    value: "存单",
    label: "存单",
  },
  {
    value: "应收账款",
    label: "应收账款",
  },
  {
    value: "商票",
    label: "商票",
  },
  {
    value: "仓单",
    label: "仓单",
  },
  {
    value: "其他",
    label: "其他",
  },
];

</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.footer {
  width: 1300px;
  height: 620px;
  background-color: #fafafa;
}
.topInput {
  width: 240px;
}
.top {
  padding: 20px 0;
  margin: 0 24px;
  display: flex;
}
.footer .top .menu {
  width: 120px;
  padding: 0 20px;
}
.footer .top .btns button {
  width: 80px;
  height: 38px;
}
.footer .top .btns {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
/*  */
.main .table {
  width: 1300px;
  display: flex;
  justify-content: space-around;
}
.footer {
  position: relative;
}
.bottom {
  position: absolute;
  left: 400px;
  bottom: 35px;
}
</style>
